<template>
    <div class="menu">
        <div class="collapse">
            <VSvgIcon icon-name="fold" :icon-size="1.3" :color="'#F0F2F4'" @handleSvgClick='handleCollapse'></VSvgIcon>
        </div>
        <el-menu :default-active="router.currentRoute.value.path" mode="vertical" router :ellipsis="true"
            :unique-opened="true" class="el-menu-vertical-demo" :background-color="global.adminTheme.asideBgColor"
            :text-color="global.adminTheme.textColor0" @open="handleOpen" @close="handleClose">
            <HMenuList :data="menuRoutes" :isCollapse="isCollapse" :svg-style="svgStyle"></HMenuList>
        </el-menu>
    </div>
</template>

<script lang="ts" setup>
import VSvgIcon from "@/components/SvgIcon/VSvgIcon.vue"
import { IGlobalState } from "@/global/types"
import useWatchRouteLinkActiveStyle from "@/hooks/useWatchRouteLinkActiveStyle"
import { IAdminMenu } from "@/store/models/Admin/types"
import { setState } from "@/utils/core"
import { getEl, getEls, injectStyle } from "@/utils/dom"
import { computed, inject, onMounted, reactive, ref, watch } from "vue"
import { useRouter } from "vue-router"
import { useStore } from "vuex"
import HMenuList from "./HMenuList.vue"

const router = useRouter()
const global: IGlobalState = inject("global")
const store = useStore()

const menuRoutes = computed(() => store.state.admin.menuRoutes as Array<IAdminMenu>)

// const isCollapse = ref(false)
const isCollapse = computed({
    get() {
        return store.state.admin.isCollapse
    },
    set(val) {
        store.commit("admin/_setState", { path: 'isCollapse', value: val })
    }
})
let svgStyle = reactive({
    position: '',
    left: ''
})

const handleOpen = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}

const handleClose = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}

const handleCollapse = () => {
    const aside = getEl('.el-aside') as HTMLElement;
    const collapseIcon = getEl('.menu .collapse') as HTMLElement;
    const title = getEl('.aside-top .title') as HTMLElement;
    const main = getEl('.admin .main-wrap') as HTMLElement;
    if (!isCollapse.value) {
        isCollapse.value = true;
        aside.style.width = '64px';
        collapseIcon.style.rotate = '180deg';
        title.style.display = 'none';
        svgStyle.position = 'absolute'
        svgStyle.left = '20px';
    } else {
        isCollapse.value = false
        aside.style.width = '200px';
        collapseIcon.style.rotate = '0deg';
        title.style.display = 'block';
        svgStyle.position = ''
        svgStyle.left = ''
    }
    main.style.width = `calc(100% - ${aside.style.width})`
}
onMounted(() => {
    const { setStyle, resetStyle } = useWatchRouteLinkActiveStyle()
    watch(
        () => router.currentRoute.value.path,
        (newVal, oldVal) => {

            const style = {
                color: global.adminTheme.textColor0,
                "background-color": global.adminTheme.linkActiveBgColor,
                display: "block"
            }
            resetStyle(style, "router-link")
            setTimeout(() => setStyle(style), 0)
        },
        {
            immediate: true
        }
    )
})
</script>
